<template>
  <div class="userTableClass">
       <dept-tree @clickDept="clickDept"/>
       <div class="main">
          <search-form-index :userConfig="userConfig" :onSearch="onSearch"/>
          <div class="buttons">
               <el-row :gutter="10" class="mb8" style="margin-top:5px">
                    <el-col :span="1.5">
                         <el-button
                              type="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              @click="handleAdd">
                            新增
                         </el-button>
                    </el-col>
                    <el-col :span="1.5">
                         <el-button
                                   type="success"
                                   plain
                                   icon="el-icon-edit"
                                   size="mini"
                                   @click="handleUpdate">
                              修改
                         </el-button>
                    </el-col>
                    <el-col :span="1.5">
                         <el-button
                                   type="danger"
                                   plain
                                   icon="el-icon-delete"
                                   size="mini"
                                   @click="handleDelete">
                               删除
                          </el-button>
                    </el-col>
                    <el-col :span="1.5">
                         <el-button
                                   type="info"
                                   plain
                                   icon="el-icon-upload2"
                                   size="mini"
                                   @click="handleImport">
                              导入
                         </el-button>
                    </el-col>
                    <el-col :span="1.5">
                         <el-button
                                   type="warning"
                                   plain
                                   icon="el-icon-download"
                                   size="mini"
                                   @click="handleExport">
                              导出
                         </el-button>
                    </el-col>
               </el-row>
           </div>
          <div class="tableArea">
             <el-table
               v-loading="loading"
               :data="userTableData">
               <el-table-column
                    type="selection"
                    width="55">
               </el-table-column>
               <el-table-column
                     v-for="item in userCloumns"
                    :key="item.prop"
                    :prop="item.prop"
                    :width="item.width"
                    :label="item.label">
                    <template slot-scope="scope">
                          <el-switch 
                              v-model="scope.row[item.prop]"
                              active-value="0"
                              v-if="item.type=='switch'"
                              inactive-value="1"
                              @change="handleStatusChange(scope)">
                         </el-switch>
                          <span v-if="!item.type" style="margin-left: 10px">{{ getField(scope,item) }}</span>
                     </template>
               </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope)">
                    修改
               </el-button>
               <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)">
                   删除
              </el-button>
            </template>
          </el-table-column>
          </el-table>
          <el-pagination
               background
               layout="prev, pager, next"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :total="total">
          </el-pagination>
          </div>
      </div>
  </div>
</template>
<script lang="ts">
 
import { Component,Vue,Inject} from 'vue-property-decorator';
import DeptTree from "@/components/dept/dept-tree.vue";
import SearchFormIndex from "@/common/form-item/search-form-index.vue";
import UserDeptApi from "@/api/user-api";
import { namespace } from 'vuex-class';
import _ from 'lodash';
const tabInfos = namespace('tabInfos');
@Component({
  components: {
       DeptTree,
       SearchFormIndex
  },
})
export default class UserList extends Vue {
     @Inject() tabIndexRef!: any;
     @tabInfos.Mutation updateState;
     private value:any="";
     private userTableData:any=[];
     private total:any=0;
     private pageSize=50;
     private currentPage=1;
     private userConfig:any=[];
     private formType:any="";
     private loading:boolean=true;
     private userCloumns:any=[];
     //生命周期函数
     async created(){
         this.userConfig=await UserDeptApi.getUserConfig();
         //获取表单配置项
         this.userCloumns=await UserDeptApi.getUserCloumns();
         await this.searchByPage();
     }
     //分页数量大小改变
      async handleSizeChange(pageSize:any){
         this.pageSize=pageSize;
         await this.searchByPage();
     }
     //翻页
      async handleCurrentChange(currentPage:any){
          this.currentPage=currentPage;
          await this.searchByPage();
     }
     //根据分页查询数据
     private async searchByPage(){
           const userResult:any=await UserDeptApi.getUserList({pageSize:this.pageSize,pageNum:this.currentPage,orderByColumn:'createTime',isAsc:'desc',userNo:""});
           this.userTableData=userResult.data.rows;
           this.userTableData.forEach(element => {
               if(element.ststus=="0"){
                     element.displayStatus=true;
               }else{
                     element.displayStatus=false;  
               }   
           });
           this.total=userResult.data.total;
           this.loading=false;
     }
     //执行搜索方法
     private  async onSearch(){
           this.loading=true;
           let params:any={pageSize:this.pageSize,pageNum:this.currentPage,orderByColumn:'createTime',isAsc:'desc'};
           this.userConfig.forEach(item => {
               params[item.key]=item.value
           });
           const userResult:any=await UserDeptApi.getUserList(params);
           this.userTableData=userResult.data.rows;
           this.total=userResult.data.total;
           this.loading=false;
     }
     //状态改变
     private handleStatusChange(row){
          console.log("row",row);
     }
     //点击部门
     private async clickDept(treeNode:any){
           this.loading=true;
           let params:any={pageSize:this.pageSize,pageNum:this.currentPage,orderByColumn:'createTime',isAsc:'desc',deptId:treeNode.id};
           this.userConfig.forEach(item => {
               params[item.key]=item.value
           });
           const userResult:any=await UserDeptApi.getUserList(params);
           this.userTableData=userResult.data.rows;
           this.total=userResult.data.total;
           this.loading=false;
     }
     //修改用户
     private handleUpdate(rowData:any){
           this.editColumn();
     }
     //删除用户
     private handleDelete(rowData:any){
         
     }
     //添加用户
     private handleAdd(){
           let ref=this.tabIndexRef;
           let currentMenu={name:"添加用户",componentId:"user-edit"};
           this.updateState({currentMenu:currentMenu});
     }
     //通用获取字段代码
     private getField(scope:any,item:any){
          let propStr=item.prop;
          let propArray=propStr.split(".");
          let result=scope.row;
          propArray.forEach(element => {
             result=result[element];
          });
          return result;
     }
     //进入修改页面
     public editColumn(){
           let ref=this.tabIndexRef;
           let currentMenu={name:"修改用户",componentId:"user-edit"};
           this.updateState({currentMenu:currentMenu});
     }
     private handleImport(){

     }
     private handleExport(){
          
     }
}
</script>
<style lang="less">
    .userTableClass{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        background-color: #f3f3f4;
        .main{
               width: calc(100% - 250px);
               display: flex;
               flex-direction: column;
               flex: 1;
               .buttons{
                    height: 40px;
                     background: #fff;
                     margin-top: 5px;
                     box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
                     width: calc(100% - 10px);
                     margin-left: 5px;
               }
               .searchArea{
                    min-height: 50px;
                    width: calc(100% - 10px);
                    background: #fff;
                    border-radius: 6px;
                    margin-top: 5px;
                    padding-top: 5px;
                    padding-bottom: 13px;
                    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
                    margin-left: 5px;
                    background: #fff;
               }
               .tableArea{
                    flex: 1;
                    display: flex;
                    margin-top: 5px;
                    margin-bottom: 2px;
                    overflow: auto;
                    margin-left: 5px;
                    width: calc(100% - 10px);
                    flex-direction: column;
                    height: calc(100% - 25x)!important;
                    font-size: 13px;
                    background-color: white;
                    .el-table {
                         margin-left: 5px;
                         margin-top: 2px;
                         margin-bottom: 10px;
                         font-size: 12px!important;
                         width: calc(100% - 10px)!important;
                         border-radius: 6px;
                         .el-table__body-wrapper{
                              overflow-y: auto;
                              position: relative;
                              height: calc(100% - 60px);
                         }
                         .el-table__body-wrapper::-webkit-scrollbar{
                              width: 5px;
                         }
                    }
                    .el-pagination{
                         margin-bottom: 10px;
                    }
             }
          
        }
    }
</style>
